<template>  
  <div class="login"> 
    <div class="login_top">
      <!-- <header>
        <span class="iconfont pull_left" @click="$router.go(-1)">&#xe637;</span>
        <h2>注册</h2>
      </header> -->
      <common-header :title="title"></common-header>
        <ul class="step">
          <li :class="{'now':0==now}">1，绑定手机号或者邮箱</li>
          <li :class="{'now':1==now}">2，设置密码</li>
        </ul>
      <form action="" method="get">
        <div class="form_item" v-if="now==0">
         <input type="text" name="" placeholder="请输入手机号或邮箱" v-model="phonenumber">
       </div>
       <!-- <div class="form_item" v-else>
         <input type="text" name="" placeholder="请输入账号(数字、英文或下划线)" v-model="acount">
       </div> -->
        <!-- <div class="form_item" v-if="phonelogin">
          <input type="number" name="" placeholder="验证码" v-model="phoneverification">
          <a class="clickBtn">获取验证码 ></a>
        </div> -->
        <div class="form_item" v-if="now==0">
          <input type="number" name="" placeholder="验证码" v-model="phoneverification">
          <a class="clickBtn" @click="fetchCode" v-text="codeStatus"></a>
        </div>
        <div class="form_item" v-if="now==1">
         <input type="text" name="" placeholder="请输入账号(数字、英文或下划线)" v-model="acount">
        </div> 
        <div class="form_item" v-if="now==1">
          <input type="password" name="" placeholder="密码" v-model="passwordCode">
          <a class="clickBtn" href="#" tabindex="-1">无法登陆?</a>
        </div>
        <div class="form_item" v-if="now==1">
          <input type="password" name="" placeholder="确认密码" v-model="passwordCodeConfirm">
        </div>
        <!-- <a href="#" @click="phonelogin=!phonelogin">密码注册></a> -->
        <button type="button" :class="{'active':isWrited}" :disabled="!isWrited" @click="RegisterAction" v-show="now==0">下一步</button>
        <button type="button" :class="{'active':isWrited}" :disabled="!isWrited" @click="RegisterAction2" v-show="now==1">完成</button>
        <h1 v-if="now==1">点击完成即表示你同意 <a href="#">隐私保护协议</a></h1>
      </form>
    </div>   
  </div>  
</template>  

<script>  
import axios from "axios";
import jsonp from 'jsonp';
import {Toast} from 'mint-ui';
import commonHeader from '@/components/common/commonHeader';
axios.defaults.withCredentials=true;
export default {  
  name: 'login',  
  data() {  
    return {  
      selected: '1',
      phonelogin:true,
      phonenumber:"",
      phoneverification:"",
      passwordCode:"",
      codeStatus:"获取验证码 >",
      iscountDown:false,
      acount:"",
      now:0,
      passwordCodeConfirm:"",
      title:"注册"
    };  
  },
  components:{
    commonHeader
  },
  methods:{
    RegisterAction2:function(){
      var that=this;
      var name=this.acount;
      var password=this.passwordCode;
      var mobile=this.phonenumber;
      var data={};
      var userNameReg=new RegExp(/^[a-zA-Z0-9_]{4,16}$/);
      var pwdReg=new RegExp(/^[a-zA-Z0-9]{6,16}$/);
      if(!userNameReg.test(this.acount)){
        Toast({
          message:"账户名称填写有误（4~16位英文数字下划线）"
        })
        return false;
      }

      if(!pwdReg.test(this.passwordCode)){
        Toast({
          message:"密码填写有误（6~16位英文数字）"
        })
        return false;
      }

      if(this.phonelogin){  //手机号码注册的
        data="userName="+name+"&userMobile="+mobile+"&type=1"+"&userPassword="+password;
      }else{  //邮箱绑定的
        // data={name:name,email:mobile,type:"2",password:password}
        data="userName="+name+"&userEmail="+mobile+"&type=2"+"&userPassword="+password;
      }

      if(this.passwordCode!==this.passwordCodeConfirm){
        Toast({
          message:"两次输入的密码不同！"
        })
        return false;
      }
        axios.get("http://huidoo.com.cn/utopia/register.action?"+data).then(function(res){
           if(res.data[0].CODE==8888){
              Toast({
                message:"注册成功！请登陆！"
              })
              that.$router.push({path:"/login"});
           }else{
              Toast({
                message:res.data[0].MSG
              })
           }
        }).catch(function(error){
            /*Toast({
            message:"网络错误，稍后重试"
          })*/
        })
      
    },
    RegisterAction:function(){
      var url="http://huidoo.com.cn/utopia/checkVerifiCode.action";
      // var data={verifiCode:this.phoneverification};
      var that=this;
        /*var userNameReg=new RegExp(/^[a-zA-Z0-9_]{4,16}$/);
        var pwdReg=new RegExp(/^[a-zA-Z0-9]{6,16}$/);
        if(!userNameReg.test(this.acount)){
          Toast({
            message:"账户名称填写有误（4~16位英文数字下划线）"
          })
          return false;
        }if(!pwdReg.test(this.passwordCode)){
          Toast({
            message:"密码填写有误（6~16位英文数字）"
          })
          return false;
        }else{
          data={acount:this.acount,passwordCode:this.passwordCode}
        }*/

      
      axios.get(url+"?verifiCode="+this.phoneverification).then(function(res){
        if(res.data[0].CODE==8888){
          Toast({
             message:"第一步验证成功！"
          });
          that.now++;
          // this.$router.push({path:"/login"});
        }else{
          Toast({
            message:"验证码输入错误"
          })
        }
      })
    },
    fetchCode:function(){
      var thisVue=this;
      if(this.phonelogin){ //手机号或邮箱注册
        var url="";
        var reg=new RegExp(/^1\d{10}$/);
        var flag1=reg.test(this.phonenumber);
        var flag2=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.phonenumber);
        if(flag1 || flag2){
          if(flag1){
            url="http://huidoo.com.cn/utopia/moVerifiCode.action?userMobile="+this.phonenumber;
            // url="https://api.douban.com/v2/movie/subject/1764796";
          }else if(flag2){
            url="http://huidoo.com.cn/utopia/emailVerifiCode.action?userEmail="+this.phonenumber;
            this.phonelogin=false;
          }
          if(!this.iscountDown){
            axios.get(url).then(function(res){
              console.log(res);
              if(res.data[0].CODE=="8888"){
                Toast({
                  message:"发送成功！请注意查收"
                })
                thisVue.iscountDown=true;
                thisVue.codeStatus=60;
                var timer=setInterval(function(){
                  if (thisVue.codeStatus>0) {
                   thisVue.codeStatus--;
                 }else{
                   thisVue.codeStatus="获取验证码 >";
                   clearInterval(timer);
                 }
               },1000)
              }else{
                Toast({
                  message:"发送失败！请稍后重试"
                })
              }
            }).catch(function(){
              /*Toast({
                  message:"网络错误，稍后重试"
              })*/
            })
            /*jsonp(url, null, (err, data) => {
             if (err) {
               console.error(err.message);
             } else {
              console.log(data);
              //if(data[0].CODE==8888){
              if(data.year=="2009"){
                Toast({
                  message:"发送成功！请注意查收"
                })
                this.iscountDown=true;
                this.codeStatus=60;
                var timer=setInterval(function(){
                  if (thisVue.codeStatus>0) {
                   thisVue.codeStatus--;
                 }else{
                   thisVue.codeStatus="获取验证码 >";
                   clearInterval(timer);
                 }
               },1000)
              }else{
               Toast({
                message:"发送失败！请稍后重试"
              })
             }
           }
         })*/
          }
        }else{
          Toast({
            message:"请输入正确的手机号码或邮箱"
          })
        }
      }
    }
  },
  computed:{
    isWrited:function(){
      if((this.phonenumber!="" && this.phoneverification!="") || this.passwordCode!="" && this.passwordCodeConfirm!=""){
        return true;
      }else{
        return false;
      }
    }
  }  
};  
</script> 
<style type="text/css" lang="less" scoped> 
.login_top{
  ul.step{
    width:100%;
    overflow:hidden;
    text-align:center;
    li{
      display:inline-block;
      position:relative;
      margin:0 14px;
    }
    li.now{
      color:#26a2ff;
    }
    li:not(:last-child)::after{
      content: '>';
      display: block;
      position: absolute;
      right: -20px;
      top: 0;
      color: #000;
    }
  }
  form{
    .form_item{
      width:80%;
      position:relative;
      margin:0 auto;
      .clickBtn{
        position:absolute;
        right:5px;
        top:50%;
        transform:translateY(-50%);
      }
    }
    margin-top:1em;
    input{
      display:block;
      width:100%;
      margin:0 auto;
      padding:8px 2px;
      border-bottom:1px solid #dedede;
      margin-bottom:5px;
    }
    button.active{
      background: #3385ff;
    }
    button{
      display:block;
      width:80%;
      padding:8px 4px;
      margin:15px auto;
      color:#FFF;
      background:#DEDEDE;
      border:1px solid #dedede;
      border-radius:20px;
    }
    >a{
      display:block;
      margin:10px auto;
      text-align:center;
    }
    h1{
      text-align:center;
      a{
        color:#26a2ff
      }
    }
  }
}
</style>